import React, { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { AreaItenmV1Wrapper } from './style';
import { formatPlayCount, formatUrlSize } from '@/utils/format';
import { useNavigate } from 'react-router-dom';

interface IProps {
  children?: ReactNode;
  itemDate: any;
  width?: string;
  isround?: number;
  urlwidth: number;
  navigatePath: string
}

const AreaItemv1: FC<IProps> = (props: IProps) => {
  const { itemDate, width = "20%", isround = 0, urlwidth, navigatePath } = props;

  const navigate = useNavigate()
  const handleAreaItem = () => {
    navigate(`${navigatePath}/${itemDate?.vid || itemDate?.albumId || itemDate.id}`)
  }
  return (
    <AreaItenmV1Wrapper onClick={handleAreaItem} isround={isround} width={width} coverbg={formatUrlSize(itemDate.coverImgUrl, urlwidth) || formatUrlSize(itemDate.picUrl, urlwidth) || formatUrlSize(itemDate.cover, urlwidth) || formatUrlSize(itemDate.coverUrl, urlwidth)}>
      <div className="cover">
        <img src={formatUrlSize(itemDate.coverImgUrl, urlwidth) || formatUrlSize(itemDate.picUrl, urlwidth) || formatUrlSize(itemDate.cover, urlwidth) || formatUrlSize(itemDate.coverUrl, urlwidth)} alt="" />
        <div className="coveer-bg"></div>
        <div className="shade">
          <div className="icon">
            <img className='play-bg' src={require("@/assets/img/play.png")} alt="" />
          </div>
        </div>
      </div>
      <div className="song-info">
        {itemDate.playCount && <div className="song-playcount">
          <img className='play-icon' src={require("@/assets/img/play.png")} alt="" />
          <div className="text">{formatPlayCount(itemDate.playCount)}</div>
        </div>}

        <div className="songName">{itemDate?.title || itemDate?.albumName || itemDate.name}</div>
        <div className="author">{itemDate.author || itemDate.artists?.[0]?.name || itemDate?.updateFrequency}</div>
      </div>
    </AreaItenmV1Wrapper>
  );
};

export default memo(AreaItemv1);
